
$(document).ready(function() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom, 'dark');
    var option;
	// dateAll();
	// 折线图的数据
    option = {
        title: {
            text: '两周报警数量'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['青岛工厂', '研发中心', '越南工厂', '沈阳工厂', '东营工厂', 'ACTR']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date_all
        },
        yAxis: {
            type: 'value'
        },
        series: [{
                name: '青岛工厂',
                type: 'line',
                data: [12, 13, 5, 6, 4, 23, 9, 15, 2, 3, 4, 15, 21, 23]
            },
            {
                name: '研发中心',
                type: 'line',
                data: [12, 4, 23, 15, 16, 1, 4, 2, 3, 5, 15, 4, 15, 17]
            },
            {
                name: '越南工厂',
                type: 'line',
                data: [12, 21, 13, 31, 13, 31, 15, 21, 14, 15, 16, 1, 1, 13]
            },
            {
                name: '沈阳工厂',
                type: 'line',
                data: [14, 12, 13, 5, 4, 6, 7, 5, 2, 1, 5, 9, 6, 3]
            },
            {
                name: '东营工厂',
                type: 'line',
                data: [1, 4, 5, 2, 3, 6, 9, 5, 4, 1, 8, 5, 2, 12]
            },
            {
                name: 'ACTR',
                type: 'line',
                data: [1, 2, 3, 4, 5, 6, 2, 1, 4, 5, 7, 8, 6, 3]
            }
        ]
    };
    option && myChart.setOption(option);
	
	// 饼图
	var chartDom = document.getElementById('main2');
	var myChart = echarts.init(chartDom, 'dark');
	var option2;
	
	option2 = {
	    legend: {
	        top: 'bottom'
	    },
	    toolbox: {
	        show: true,
	        feature: {
	            mark: {show: true},
	            dataView: {show: true, readOnly: false},
	            restore: {show: true},
	            saveAsImage: {show: true}
	        }
	    },
	    series: [
	        {
	            name: '面积模式',
	            type: 'pie',
	            radius: [30, '80%'],
	            center: ['50%', '50%'],
	            roseType: 'pie',
	            itemStyle: {
	                borderRadius: 8
	            },
	            data: [
	                {value: 40, name: 'rose 1'},
	                {value: 38, name: 'rose 2'},
	                {value: 32, name: 'rose 3'},
	                {value: 30, name: 'rose 4'},
	                {value: 28, name: 'rose 5'},
	                {value: 26, name: 'rose 6'},
	                {value: 22, name: 'rose 7'},
	                {value: 18, name: 'rose 8'}
	            ]
	        }
	    ]
	};
	
	option2 && myChart.setOption(option2);
	
	
	// 动态排序柱状图
	var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
	
	var chartDom = document.getElementById('main3');
	var myChart = echarts.init(chartDom, 'dark');
	var option3;
	var updateFrequency = 2000;
	var dimension = 0;
	
	var countryColors = {"Australia":"#00008b","Canada":"#f00","China":"#ffde00","Cuba":"#002a8f","Finland":"#003580","France":"#ed2939","Germany":"#000","Iceland":"#003897","India":"#f93","Japan":"#bc002d","North Korea":"#024fa2","South Korea":"#000","New Zealand":"#00247d","Norway":"#ef2b2d","Poland":"#dc143c","Russia":"#d52b1e","Turkey":"#e30a17","United Kingdom":"#00247d","United States":"#b22234"};
	
	$.when(
	    $.getJSON('https://cdn.jsdelivr.net/npm/emoji-flags@1.3.0/data.json'),
	    $.getJSON(ROOT_PATH + '/data/asset/data/life-expectancy-table.json')
	).done(function (res0, res1) {
	    var flags = res0[0];
	    var data = res1[0];
	    var years = [];
	    for (var i = 0; i < data.length; ++i) {
	        if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
	            years.push(data[i][4]);
	        }
	    }
	
	    function getFlag(countryName) {
	        if (!countryName) {
	            return '';
	        }
	        return (flags.find(function (item) {
	            return item.name === countryName;
	        }) || {}).emoji;
	    }
	    var startIndex = 10;
	    var startYear = years[startIndex];
	
	    var option3 = {
	        grid: {
	            top: 10,
	            bottom: 30,
	            left: 150,
	            right: 80
	        },
	        xAxis: {
	            max: 'dataMax',
	            label: {
	                formatter: function (n) {
	                    return Math.round(n);
	                }
	            }
	        },
	        dataset: {
	            source: data.slice(1).filter(function (d) {
	                return d[4] === startYear;
	            })
	        },
	        yAxis: {
	            type: 'category',
	            inverse: true,
	            max: 10,
	            axisLabel: {
	                show: true,
	                textStyle: {
	                    fontSize: 14
	                },
	                formatter: function (value) {
	                    return value + '{flag|' + getFlag(value) + '}';
	                },
	                rich: {
	                    flag: {
	                        fontSize: 25,
	                        padding: 5
	                    }
	                }
	            },
	            animationDuration: 300,
	            animationDurationUpdate: 300
	        },
	        series: [{
	            realtimeSort: true,
	            seriesLayoutBy: 'column',
	            type: 'bar',
	            itemStyle: {
	                color: function (param) {
	                    return countryColors[param.value[3]] || '#5470c6';
	                }
	            },
	            encode: {
	                x: dimension,
	                y: 3
	            },
	            label: {
	                show: true,
	                precision: 1,
	                position: 'right',
	                valueAnimation: true,
	                fontFamily: 'monospace'
	            }
	        }],
	        // Disable init animation.
	        animationDuration: 0,
	        animationDurationUpdate: updateFrequency,
	        animationEasing: 'linear',
	        animationEasingUpdate: 'linear',
	        graphic: {
	            elements: [{
	                type: 'text',
	                right: 160,
	                bottom: 60,
	                style: {
	                    text: startYear,
	                    font: 'bolder 80px monospace',
	                    fill: 'rgba(100, 100, 100, 0.25)'
	                },
	                z: 100
	            }]
	        }
	    };
	
	    // console.log(option);
	    myChart.setOption(option3);
	
	    for (var i = startIndex; i < years.length - 1; ++i) {
	        (function (i) {
	            setTimeout(function () {
	                updateYear(years[i + 1]);
	            }, (i - startIndex) * updateFrequency);
	        })(i);
	    }
	
	    function updateYear(year) {
	        var source = data.slice(1).filter(function (d) {
	            return d[4] === year;
	        });
	        option3.series[0].data = source;
	        option3.graphic.elements[0].style.text = year;
	        myChart.setOption(option3);
	    }
	})
	
	option3 && myChart.setOption(option3);
})